<template>
  <div class="login-container">
    <div
      id="gradeFourChart"
      :style="{ width: '95%', height: '350px' }"
    />
  </div>
</template>

<script scope>
// import echarts from "echarts";
import { getMsgPercentReport } from '@/api/echarts'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      cmcc: 0,
      ctcc: 0,
      cucc: 0
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getMsgPercentReport()
  },
  mounted() {
    setTimeout(() => {
      this.drawLine()
    }, 1000)
  },
  methods: {
    getMsgPercentReport() {
      getMsgPercentReport().then((res) => {
        // console.log(res.data.data);
        this.cmcc = res.data.data[0].value
        this.cucc = res.data.data[1].value
        this.ctcc = res.data.data[2].value
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const gradeFourChart = this.$echarts.init(
        document.getElementById('gradeFourChart')
      )
      // 绘制图表
      gradeFourChart.setOption({
        title: {
          text: '各运营商下发短信占比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}(条) ({d}%)'
        },
        series: [
          {
            name: '各运营商下发条数以及占比',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {
                value: this.cmcc,
                name: '移动',
                itemStyle: {
                  color: 'skyblue'
                }
              },
              {
                value: this.cucc,
                name: '联通',
                itemStyle: {
                  color: '#FBCF6C'
                }
              },
              {
                value: this.ctcc,
                name: '电信',
                itemStyle: {
                  color: '#546FC6'
                }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
